<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>jQuery EasyUI</title>
    <link rel="stylesheet" type="text/css" href="../jqueryeasyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../jqueryeasyui/themes/icon.css">
    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="../jqueryeasyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.edatagrid.js"></script>

    <script type="text/javascript">
        $(function() {
            $('#dg').edatagrid({
                url:"http://localhost:8080/learn/queryLeanList",
                title: '测试表格',
                pagination: true,//显示分页工具栏
                saveUrl: "http://localhost:8080/learn/add", //添加记录
                destroyUrl:"http://localhost:8080/learn/delete",//删除记录
                updateUrl:"http://localhost:8080/learn/update" //修改记录
            });

            var p = $('#dg').datagrid('getPager');
            $(p).pagination({
                pageSize: 10,//每页显示的记录条数，默认为10
                pageList: [5, 10, 15],//可以设置每页记录条数的列表
                beforePageText: '第',//页数文本框前显示的汉字
                afterPageText: '页    共 {pages} 页',
                displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',
            });
        });

    </script>

</head>
<body>

<table id="dg"
       class="easyui-datagrid"
       style="width:700px;height:390px"
       rownumbers="true"
       fitColumns="true"
       singleSelect="true"
       toolbar="#toolbar"
>
    <thead>
    <tr>
        <th field="id"  hidden width="50">id</th>
        <th field="author" width="50" editor="{type:'validatebox',option:{required:true}}">作者</th>
        <th field="title"  width="50" editor="{type:'validatebox',option:{required:true}}">标题</th>
        <th field="url"     width="50" editor="text">地址</th>
    </tr>
    </thead>
</table>
<div id="toolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('addRow')">添加</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">删除</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')">修改</a>
</div>


</body>
</html>